<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue 2 with Echarts - Temperature & Humidity Charts</title>
        <!-- 引入Vue 2库 -->
        <script src="./js/vue@2.js"></script>
        <!-- Axios -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <!-- 引入Echarts库 -->
        <script src="https://unpkg.com/echarts@^4/dist/echarts.min.js"></script>
        <!-- import Element-UI -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <!-- import Element-UI-CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

        <style>
            #app {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                flex-wrap: wrap;
                margin: 0 auto;
                max-width: 800px;
            }

            .chart-container {
                width: 100%;
                height: 300px;
                margin-bottom: 20px;
                background-color: #fff;
            }

        </style>
    </head>
    <body>
        <div id="app">
            <el-switch
                    style="display: block;margin: 10px 0 10px 500px;"
                    v-model="mode"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="IoT物联云最新数据"
                    @change="changeMode"
                    inactive-text="本地模拟数据">
            </el-switch>
            <!-- 左侧温度图表 -->
            <div class="chart-container" id="temperature-chart"></div>

            <!-- 右侧湿度图表 -->
            <div class="chart-container" id="humidity-chart"></div>

        </div>

        <script>
            // 定义Vue应用
            new Vue({
                el: '#app',
                data: {
                    mode: false,
                    // 假设已获取到温湿度数据，这里以模拟数据为例
                    temperatureData: [
                        {time: '2024-04-23 00:00', value: 18},
                        {time: '2024-04-23 06:00', value: 19},
                        {time: '2024-04-23 12:00', value: 22},
                        {time: '2024-04-23 18:00', value: 25},
                        {time: '2024-04-24 00:00', value: 23},
                    ],
                    humidityData: [
                        {time: '2024-04-23 00:00', value: 60},
                        {time: '2024-04-23 06:00', value: 65},
                        {time: '2024-04-23 12:00', value: 70},
                        {time: '2024-04-23 18:00', value: 75},
                        {time: '2024-04-24 00:00', value: 73},
                    ],
                    temperatureChartInstance: null,
                    humidityChartInstance: null,
                },
                methods: {
                    changeMode() {
                        setInterval(() => {
                            axios.get('/test/temperature').then(response => {
                                if (response.data.code !== 200) {
                                    this.$message.error(response.data.msg)
                                    return
                                }

                                const list = response.data.data;
                                this.temperatureData = list.map(item => {
                                    return {
                                        time: item.createTime,
                                        value: item.upValue,
                                    };
                                });
                                this.temperatureChartInstance.setOption({
                                    series: [{
                                        data: this.temperatureData.map(item => item.value).reverse(),
                                    }],
                                    xAxis: {
                                        data: this.temperatureData.map(item => item.time).reverse(),
                                    },
                                });
                                this.$message.success("成功更新数据！")
                            }, fail => {
                                this.$message.error("接口调用失败！")
                            });

                            axios.get('/test/humidity').then(response => {
                                if (response.data.code !== 200) {
                                    this.$message.error(response.data.msg)
                                    return
                                }

                                const list = response.data.data;
                                this.humidityData = list.map(item => {
                                    return {
                                        time: item.createTime,
                                        value: item.upValue,
                                    };
                                });
                                this.humidityChartInstance.setOption({
                                    series: [{
                                        data: this.humidityData.map(item => item.value).reverse(),
                                    }],
                                    xAxis: {
                                        data: this.humidityData.map(item => item.time).reverse(),
                                    },
                                });
                            });
                        }, 5000)
                    },
                    initTemperatureChart() {
                        const chartContainer = document.getElementById('temperature-chart');
                        this.temperatureChartInstance = echarts.init(chartContainer);

                        const option = {
                            title: {
                                text: 'Temperature Chart',
                            },
                            tooltip: {
                                trigger: 'axis',
                                formatter: (params) => {
                                    return `${params[0].name}:\nTemperature: ${params[0].value}℃`;
                                },
                            },
                            xAxis: {
                                type: 'category',
                                data: this.temperatureData.map(item => item.time),
                            },
                            yAxis: {
                                type: 'value',
                                name: 'Temperature (℃)',
                                min: 0,
                                max: 60,
                                interval: 10,
                            },
                            series: [
                                {
                                    name: 'Temperature',
                                    type: 'line',
                                    data: this.temperatureData.map(item => item.value),
                                    smooth: true,
                                },
                            ],
                        };

                        this.temperatureChartInstance.setOption(option);
                    },
                    initHumidityChart() {
                        const chartContainer = document.getElementById('humidity-chart');
                        this.humidityChartInstance = echarts.init(chartContainer);

                        const option = {
                            title: {
                                text: 'Humidity Chart',
                            },
                            tooltip: {
                                trigger: 'axis',
                                formatter: (params) => {
                                    return `${params[0].name}:\nHumidity: ${params[0].value}%`;
                                },
                            },
                            xAxis: {
                                type: 'category',
                                data: this.humidityData.map(item => item.time),
                            },
                            yAxis: {
                                type: 'value',
                                name: 'Humidity (%)',
                                min: 0,
                                max: 100,
                                interval: 10,
                                axisLabel: {
                                    formatter: '{value} %',
                                },
                            },
                            series: [
                                {
                                    name: 'Humidity',
                                    type: 'line',
                                    data: this.humidityData.map(item => item.value),
                                    smooth: true,
                                },
                            ],
                        };

                        this.humidityChartInstance.setOption(option);
                    }
                },
                mounted() {
                    this.initTemperatureChart();
                    this.initHumidityChart();
                },
                beforeDestroy() {
                    if (this.temperatureChartInstance) {
                        this.temperatureChartInstance.dispose();
                    }
                    if (this.humidityChartInstance) {
                        this.humidityChartInstance.dispose();
                    }
                },
            });
        </script>
    </body>
</html>
